<template>
  <div class="backGroundColor">
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <el-card class="box-card0">
          <div style="text-align: center; font-size: 25px; font-weight: 550">
            Select The Required Data for Analysis
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="10"
        ><el-card class="box-card1"
          ><PopulationStatistics></PopulationStatistics></el-card
      ></el-col>
      <el-col :span="10"
        ><el-card class="box-card1">
          <FunnelDiagram></FunnelDiagram></el-card
      ></el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20"><el-card class="box-card2"><KeyFactorAnalysis></KeyFactorAnalysis></el-card></el-col>
    </el-row>
  </div>
</template>

<script>
import PopulationStatistics from "@/views/DataAnalysis/Questionnaire/PopulationStatistics.vue";
import FunnelDiagram from '@/views/DataAnalysis/Questionnaire/FunnelDiagram.vue'
import KeyFactorAnalysis from '@/views/DataAnalysis/Questionnaire/KeyFactorAnalysis.vue'
export default {
  name: "QuestionnaireAnalysis",
  components: {
    PopulationStatistics,
    FunnelDiagram,
    KeyFactorAnalysis
  },
};
</script>

<style scoped lang="scss">
.backGroundColor {
  background: #bdbdbd42;
}
.box-card1 {
  border-radius: 25px;
  width: 730px;
  height: 830px;
  margin: 20px auto;
  background: #64bbe742;
}
.box-card2 {
  border-radius: 25px;
  width: 1530px;
  height: 820px;
  margin: 30px auto;
  background: #64bbe742;
}
.box-card0 {
  border-radius: 25px;
  width: 930px;
  margin: 5px auto;
  margin-top: 1%;
  background: #64bbe742;
}
</style>